<template>
  <div class="index box clmcenter">
    <img src="../assets/img/logo.png" class="logo" />
    <img src="../assets/img/text.png" class="text" />
    <div class="qmbox">
      <vue-signature-pad
        class="signature"
        width="100%"
        height="450px"
        ref="signaturePad"
        :options="options"
      />
    </div>
    <div class="btnbox">
      <van-button plain @click="reset">重写</van-button>
      <van-button plain @click="confirm">保存</van-button>
    </div>
    <img src="../assets/img/yz.png" class="yzimg" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      type: 0,
      options: {
        penColor: "#000",
        minWidth: 2, //最小宽度
        maxWidth: 5,
      },
    };
  },
  created() {
    this.type = this.$store.state.imginfo.type;
    if (this.type == 1) {
      this.options.penColor = "#fff";
    } else {
      this.options.penColor = "#000";
    }
  },
  methods: {
    // 重置
    reset() {
      this.$refs.signaturePad.clearSignature();
    },

    // 确定按纽
    confirm() {
      let { isEmpty, data } = this.$refs.signaturePad.saveSignature();
      console.log(isEmpty); // 签名是否为空
      // console.log(data); // 签名的base64
      this.$store.commit("setSign", data);
      if (this.type == 1) {
        //唐
        this.$router.replace("/tang");
      } else {
        //宋
        this.$router.replace("/song");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.index {
  background: url("../assets/img/indexbg.jpg") no-repeat bottom center;
  background-size: cover;
  .logo {
    margin-top: 4rem;
  }
  .text {
    align-self: flex-start;
    margin-left: 8rem;
    margin-top: 5rem;
  }
  .qmbox {
    margin-top: 3rem;
    width: 95%;
    height: 450px;
    border: 4px solid #e1ab2b;
    box-sizing: border-box;
    border-radius: 0.5rem;
  }
  .btnbox {
    width: 100%;
    margin-top: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    button {
      font-size: 2rem;
      color: #ffffff;
      background: none;
      border-style: none;
      border-radius: 3rem;
      border: 2px solid #fff;
      box-sizing: border-box;
      margin: 0 2rem;
      padding: 2rem 5rem;
    }
  }
  .yzimg {
    margin-top: 2rem;
    margin-right: 8rem;
    align-self: flex-end;
  }
}
@media only screen and (min-height: 1300px) {
  .index {
    .text {
      margin-top: 7rem;
    }
    .qmbox {
      margin-top: 5rem;
    }
    .btnbox {
      margin-top: 12rem;
    }
  }
}
@media only screen and (min-height: 1350px) {
  .index {
    .logo {
      margin-top: 5rem;
    }
    .btnbox {
      margin-top: 14rem;
    }
  }
}
@media only screen and (min-height: 1400px) {
  .index {
    .qmbox {
      margin-top: 6rem;
    }
    .btnbox {
      margin-top: 18rem;
    }
  }
}
</style>
